<template>
  <div>
    <Spin :spinning="loading" tip="Loading...">
      <FilterTable
        ref="picTable"
        :columns="picColumns"
        :dataSource="picFiles"
        :params="picParams"
        height="auto"
        :datakey="'records'"
        :isSelectColumn="false"
        :isToperInfo="false"
        :isColumnFilter="false"
        :isPagination="false"
        :onRowSelectChange="selectChange"
        :onColumnsChange="picColumns => (this.picColumns = picColumns)"
      >
      </FilterTable>
    </Spin>


      <!-- <template slot="controls" v-if="type === 'edit'">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="openAddDialog()">新增</el-button>
      </template> -->
    </FilterTable>
    <!-- 查看凭证 -->
    <el-image-viewer :url-list="picList" v-show="imagesViewShow" :on-close="closeImagesViewer"></el-image-viewer>

     <div class="dialogBottmView">
        <el-button @click="closeDialog">返回</el-button>
     </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getFileGroup }  from '@/api/graphic/catalogue/index';
import config from '@/assets/js/config';
import axios from '@/api/fetch';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

export default {
  name: 'ImagePart',
  mixins: [dictionary],
  components: { ElImageViewer},
  props: {
    rowData: { type: Object, default: () => ({}) }
  },
  data() {
    return {
      uploadPrefix: config.uploadUrl,// 附件上传前缀
      picColumns: this.createPicTable(),
      picFiles: [],
      picParams: { xtdjid: '', xtfjlx: 'tt_part_info',SERIAL_NUM:"1001" },
      loading: false,
      picList: [],
      imagesViewShow: false

    };
  },
  created() {
    this.init(this.rowData);
  },
  methods: {
    closeImagesViewer() {
      this.imagesViewShow = false;
    },
    selectChange(val) {
      console.log('val', val);
      this.rowSelectData = val;
    },
    init(data) {
      this.loading=true;
      getFileGroup({ "xtdjid": data.partId, "xtfjlx": "tt_part_info","SERIAL_NUM":"1001"  }).then(response => {
        this.picFiles = response.data;
        this.picFiles.forEach(x => {
          x.xtwjmc = x.name;
          x.xtwjlj = x.url;
          this.getPicUrl(x.url).then(res => {
            x.url = res;
            if (this.getFileType(x.name) != 'pdf') {
              this.picList.push(res);
            }
          });
        });
        this.loading=false;
      });
    },

    createPicTable() {
      return [
        { title: '序号', dataIndex: 'index', width: 70, sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },

        { title: '图片', dataIndex: 'name', align: 'center',
          render: p => {
            let fileType = this.getFileType(p.row.name);
            return fileType == 'pdf' ? (
                <div class="imgfile">
                  <div class="pdfdiv"></div>
                  <a href={p.row.url} target="_blank">{p.row.name}</a>
                </div>
              ) :
              (
                <div class="imgfile">
                  <img src={p.row.url} onClick={() => { this.imagesViewShow = true; }} alt=""/>
                  <a href={p.row.url} target="_blank">{p.row.name}</a>
                </div>
              );
          }
        }
      ]
    },

    closeDialog(param) {
      this.$emit('close', { visible: false, type: param });
    },

    async getPicUrl(url) {
      let actionUrl = this.uploadPrefix+ '/api/file/download/url?fileUrl=' + url;
      let res = await axios.post(actionUrl);
      return res.data;
    },

    getFileType(fileName) {
      let fileType = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length);
      return fileType;
    }
  }
};
</script>

<style>
.el-table__body-wrapper {
  overflow-x: auto;
  position: static;
}
.el-image {
  float: left;
  margin-left: 130px;
}
/* .el-image a {
    float: left;
} */
.imgfile {
  height: 60px;
  line-height: 60px;
  overflow: hidden;
}
.imgfile a {
  float: left;
  margin-left: 20px;
}
.imgfile img {
  float: left;
  margin-left: 30%;
  width: 100px;
  height: 100%;
  object-fit: cover;
}
.pdfdiv {
  float: left;
  margin-left: 30%;
  width: 100px;
  height: 100%;
  object-fit: cover;
}
</style>
